import React, { Component, Fragment } from 'react';
import styles from './InterviewResult.less';
import {
  LeftOutlined
} from '@ant-design/icons';
import { Row, Col, Card, notification } from 'antd';
import { history } from 'umi';
import request from '@/utils/request'
import moment from 'moment'
import PublicUtils from "@/utils/publicUtils";
import usercheckIcon from '@/assets/usercheckIcon.png';


export default class entryDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '候选人详情',
      staffId: '',
    }
  }

  componentDidMount() {
    const queryParams = new URLSearchParams(history.location.search);
    const staffId = queryParams.get('staffId');
    this.setState({
      staffId: staffId,
      isJoinData: {}
    }, () => {
      this.getEntryDetails(staffId)
    })
  }

  //获取已入职详情
  getEntryDetails = async (staffId) => {
    const res = await request.get('/staff/entryDetails', {
      params: {
        staffId,
        source:1
      }
    });
    if (res && res.error_code === 200) {
      const result = !res.data ? {} : res.data
      this.setState({
        isJoinData: { ...result },
      })
    } else {
      notification.error({
        message: res ? res.error_msg : '请求错误'

      })
    }
  }


  render() {
    const {
      title,
      isJoinData
    } = this.state;

    return (
      <div className={styles.contain}>
        <div className={styles.headerTitle}>
          <Row style={{ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
            <Col style={{ marginLeft: '20px', fontSize: '18px', color: '#409EFF' }} onClick={() => history.go(-1)}>
              <LeftOutlined style={{ fontSize: '20px', color: '#409EFF' }} />返回
            </Col>
            <Col offset={20} style={{ marginLeft: '25px', flexGrow: 1 }}>
              <div style={{ fontSize: '18px', color: '#333333', fontWeight: 'bold' }}>{title}</div>
            </Col>
          </Row>
        </div>
        <div className={`${styles.context}`}>
          <div className={styles.baseName}>
            <div className={styles.name}>{isJoinData?.staffName}</div>
            <div className={styles.develName}>{isJoinData?.staffJobName}{' / ' + isJoinData?.levelName}</div>
            <div className={styles.icon}>
              <img src={usercheckIcon} alt="usercheckIcon" style={{ width: '40px', height: '35px' }}></img>
              <div style={{ color: '#03AF00', fontSize: '18px', height: '35px', display: 'flex', alignItems: 'center' }}>已入职</div>
            </div>
          </div>
          <div className={styles.baseInfo}>
            <div className={styles.entryDetails}>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col style={{ fontSize: '18px', fontWeight: 'bold' }}>入职详情</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>面试结果反馈时间</Col>
                <Col span={16}>{isJoinData?.interviewFeedbackTime}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>资料审核时间</Col>
                <Col span={16}>{isJoinData?.materialExamineTime}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>入职资料审核人</Col>
                <Col span={16}>{isJoinData?.materialExaminePersonName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>入职办理时间</Col>
                <Col span={16}>{isJoinData?.entryHandleTime}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>入职办理人</Col>
                <Col span={16}>{isJoinData?.entryHandlePersonName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>附件信息完整度</Col>
                <Col span={16}><div>{isJoinData?.completeAttachment ? '完整' : '不全'}</div>
                  {isJoinData?.fileName && isJoinData?.fileName.map(item => {
                    return <div>{item}</div>
                  })}</Col>
              </Row>
            </div>
            <div className={styles.entryDetails}>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col style={{ fontSize: '18px', fontWeight: 'bold' }}>基本信息</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>姓名</Col>
                <Col span={16}>{isJoinData?.staffName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>联系方式</Col>
                <Col span={16}>{isJoinData?.phoneNum}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>员工类别</Col>
                <Col span={16}>{PublicUtils.getStaffType(isJoinData?.staffType)}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>职务/技能</Col>
                <Col span={16}>{isJoinData?.staffJobName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>职级/级别</Col>
                <Col span={16}>{isJoinData?.levelName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>入职日期</Col>
                <Col span={16}>{isJoinData?.joinTime ? moment(isJoinData?.joinTime).format('YYYY-MM-DD') : ''}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>试用期限</Col>
                <Col span={16}>{isJoinData?.probationMonthNum ? isJoinData.probationMonthNum + '月' : ''}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>协议/合同期限</Col>
                <Col span={16}>{isJoinData?.contractYearNum ? isJoinData.contractYearNum + '年' : ''}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>工作地区</Col>
                <Col span={16}>{isJoinData?.workLocale}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>部门</Col>
                <Col span={16}>{isJoinData?.deptName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>直属上级</Col>
                <Col span={16}>{isJoinData?.leaderName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>招聘人</Col>
                <Col span={16}>{isJoinData?.recruitName}</Col>
              </Row>
            </div>

            <div className={styles.entryDetails}>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col style={{ fontSize: '18px', fontWeight: 'bold' }}>薪资信息</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>转正前薪资</Col>
                <Col span={16}>{isJoinData?.interviewSalary?.beforeSalary}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>转正后薪资</Col>
                <Col span={16}>{isJoinData?.interviewSalary?.afterSalary}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>工资卡银行</Col>
                <Col span={16}>{isJoinData?.interviewSalary?.bankName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>五险一金缴纳机构</Col>
                <Col span={16}>{isJoinData?.interviewSalary?.socialAgencyName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>五险一金缴纳方式</Col>
                <Col span={16}>{isJoinData?.interviewSalary?.paymentMethodName}</Col>
              </Row>
            </div>
            <div className={styles.entryDetails}>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col style={{ fontSize: '18px', fontWeight: 'bold' }}>备注</Col>
              </Row>
              <div style={{ lineHeight: '2' }}>
              {isJoinData?.description}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

}